<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>凭证打印</title>

	<!-- 引入 css -->
	<link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
	<!-- 引入 js -->
	<script src="/admin/plugin/wangEditor/index.js"></script>

	<!--引入 element-ui 的样式，-->
	<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
	<!-- 必须先引入vue，  后使用element-ui -->
	<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
	<!-- 引入element 的组件库-->
	<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

	<script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>
	<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">

	<!--    引入Layui组件-->
	<link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"
		  tppabs="http://res.layui.com/layui/dist/css/layui.css" media="all">
	<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

	<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
	<script type="text/javascript" src="/admin/js-css/js/jQuery.print.js?v=1.1"></script>


	<style type="text/css">
		.layui-table-click {
			background-color: cadetblue !important;
			color: white;
		}

		::-webkit-scrollbar {
			width: 6px;
			height: 10px;
			background-color: rgba(255, 255, 255, 0.1);
		}

		::-webkit-scrollbar-thumb {
			background: rgba(144, 147, 153, .3);
			border-radius: 4px;
			cursor: pointer;
		}

		.layui-form-label {
			float: left;
			display: block;
			padding: 7px 1px;
			width: 100px;
			font-weight: 400;
			line-height: 14px;
			text-align: right;
		}

		/**输入框高度设置**/
		.layui-input,
		.layui-select,
		.layui-textarea {
			height: 30px;
			line-height: 30px\9;
		}

		/**按钮样式设置**/
		.layui-btn {
			height: 30px;
			line-height: 30px;
			font-size: 13px;
		}

		.layui-btn+.layui-btn {
			margin-left: 0px;
		}

		.layui-table,
		.layui-table-view {
			margin: 0px 0;
		}


		.tableboxs{
			margin: 0 auto;
			width: 80%;
			position: relative;
		}

		.tablebox {
			margin: 0 auto;
			width: 80%;
			text-align: center;
		}

		.tablebox .titletop {
			margin-bottom: 10px;
			margin-top: 10px;
			font-size: 20px;
			font-weight: 700;
		}

		.tablebox .spans {
			width: 100%;
			text-align: right;
			margin-bottom: 5px;
		}

		.tablebox .spans div {
			display: flex;
			justify-content: space-between;
		}

		.tablebox td,
		.tablebox th {
			height: 30px;
			padding: 5px 10px;
		}

		.posbottom {
			width: 80%;
			margin: 10px auto;
		}

		.posbottom div {
			display: flex;
			justify-content: space-between;
		}
		.displayleft{
			display: flex;
			padding: 10px;
			background-color: #f1f1f1;
			margin-top: 20px;
		}
		.itembtn{
			width: 64px;
			text-align: center;
			border-left: 1px solid #ddd;
		}
		.itembtn:hover{
			cursor: pointer;
		}


	</style>
</head>
<body >
<div id="app" >
	<div class="displayleft">
		<div class="itembtn" @click="htmlprint"><i class="layui-icon layui-icon-print"></i> 打印</div>
		<!--			<div class="itembtn"><i class="layui-icon layui-icon-export"></i> 导出</div>-->
	</div>

	<div  id="printMy" style="color: #000000;padding: 5px;">
		<div class="demoTable"    >
			<table id="tablebox_table">
				<div class="tableboxs">
					<!-- 专用收据表格 -->
					<table border='1' class='tablebox'>
						<caption class="titletop">收费凭证</caption>
						<caption class="spans">
							<div>
								<span>业主名称：{{formData.xm}}</span>
								<span>缴费时间：{{formData.sj}}</span>
							</div>
						</caption>
						<tr>
							<td width="100px">缴费类型：</td>
							<td>购水</td>
							<td width="100px">充值类型：</td>
							<td>{{formData.zffs}}</td>
						</tr>
						<tr>
							<td>充值金额：</td>
							<td>{{formData.fee}}元</td>
							<td>充值数量：</td>
							<td>{{formData.gsl}}立方</td>
						</tr>
						<tr>
							<td>水单价：</td>
							<td>{{formData.jbsf}}元</td>
							<td>调剂数量：</td>
							<td>0立方</td>
						</tr>
						<tr>
							<td>地址：</td>
							<td>{{formData.khdz}}</td>

							<td colspan="2">电话：{{formData.dh}}  卡号：{{formData.kbh}}</td>
						</tr>

						<tr>
							<td>备注：</td>
							<td colspan="3">基本水费 {{formData.jbsf}}  水资源费 {{formData.szyf}}  污水费 {{formData.wsj}}</td>
						</tr>


					</table>

				</div>

				<div class="posbottom">
					<div>
						<span>收款人：{{formData.shoukuanren}}</span>
						<span>操作员：{{formData.czy}}</span>
					</div>
				</div>
			</table>
		</div>
	</div>

</div>


<script>
	var vm = new Vue({
		el: '#app',
		data: {
			parmsData:{},
			formData:{szyf:0,wsj:0,jbsf_fee:0},
			jbsdj:"0",
		},
		created(){
			this.parmsData = getParams();
			this.getDataPrint();
		},
		methods: {
			htmlprint(){
				$("#printMy").print();
			},
			async getDataPrint(){
				const res = await postWebCustom(getTableId("3892"),{"ddid":this.parmsData.id});
				this.formData = res.data;
				const res1 = res.data.mapjg;
			}
		},

	})
</script>
</body>
</html>
